<template>
	<view>
		<uni-card title="" extra="" isShadow note="">
		<text>昵称</text><input class="uni-input" placeholder="请输入昵称" maxlength="10" v-model="nickName"/>
		<text>用户名</text><input class="uni-input" @input="onKeyInput" maxlength="18" placeholder="请输入用户名" />
		<text>密码</text><input class="uni-input" placeholder="请输入密码" maxlength="18" v-model="password" :password="true"/>
		<text>密码</text><input class="uni-input" placeholder="请确认密码" maxlength="18" v-model="password_verify" :password="true"/>
		</uni-card>

		<view class="button-sp-area">
			<button type="primary" @click="userRegister">注册</button>
		</view>
	</view>
</template>
<script>
	import {
		register
	} from '../../api/user.js';
	
	export default {
		data() {
			return {
				nickName : '',
				userName: '',
				password:'',
				password_verify: ''

			}
		},
		methods: {
			onKeyInput: function(event) {
				this.userName = event.detail.value
			},
			userRegister(){
				if(this.password !== this.password_verify){
					uni.showToast({
						icon :'none',
					    title: '密码不一致'
					});
					return
				}
				let obj = {
					nickname : this.nickName,
					user_name : this.userName,
					password : this.password
				}
				
				uni.showLoading({
					title: '注册中'
				})
				
				register(obj).then(res=>{
					console.log(res)
					if(res.data.status != 200){
						uni.showToast({
							icon :'none',
						    title: res.data.msg + '\n用户可能已存在'
						});
					}else{
						//注册成功
						//update state
						
						//返回
						uni.showToast({
						    title: res.data.msg,
						});
						uni.navigateTo({
							url:'./login',
							animationType: 'pop-in',
							animationDuration: 200,
							complete(e) {
								console.log(e)
							}
						})
					}
					
				}).catch(err=>{
					uni.showToast({
						icon : 'none',
					    title: '系统错误'
					});
					console.log(err.data)
				})
			
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	
	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	/* #endif */
	
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.button-sp-area {
		margin: 0 auto;
		width: 80%;
	}

	.uni-input {
	    height: 28px;
	    line-height: 28px;
	    font-size: 15px;
	    padding: 0px;
	    flex: 1;
	    background-color: #FFFFFF;
	}
	
	
</style>
